<template>
  <a-layout-sider :width="280" class="session-list">
    <div class="list-header">
      <a-input-search placeholder="搜索" />
      <a-button type="text" @click="openCreateSessionModal">
        <IconPlus />
      </a-button>
    </div>
    
    <a-list :bordered="false" split>
      <a-list-item 
        v-for="session in sortedSessions"
        :key="session.id"
        :class="{ 
          'active-session': activeSession === session.id,
          'sticky-session': session.sticky
        }"
        @click="$emit('session-click', session.id)"
      >
        <a-list-item-meta
          :title="session.name"
          :description="messages[session.id]?.[0]?.content || '暂无消息'"
        >
          <template #avatar>
            <a-avatar 
              :size="40" 
              :style="{ backgroundColor: session.type === 'group' ? '#3370ff' : '#00b42a' }"
            >
              <IconUserGroup v-if="session.type === 'group'" />
              <IconUser v-else />
            </a-avatar>
          </template>
        </a-list-item-meta>
        <template #actions>
          <IconStar v-if="session.sticky" :style="{ color: '#ffb400' }" />
          <a-badge :count="session.unread" />
          <a-button type="text" @click="openEditSessionModal(session)">编辑</a-button>
          <a-button type="text" @click="deleteSession(session.id)">删除</a-button>
        </template>
      </a-list-item>
    </a-list>
  </a-layout-sider>

  <a-modal v-model:visible="isCreateSessionModalVisible" title="新增会话" @ok="createSession">
    <a-form>
      <a-form-item label="会话名称">
        <a-input v-model="newSessionName" placeholder="请输入会话名称" />
      </a-form-item>
      <a-form-item label="会话类型">
        <a-radio-group v-model="newSessionType">
          <a-radio value="personal">个人</a-radio>
          <a-radio value="group">群组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否置顶">
        <a-switch v-model="newSessionSticky" />
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal v-model:visible="isEditSessionModalVisible" title="编辑会话" @ok="saveEditSession">
    <a-form>
      <a-form-item label="会话名称">
        <a-input v-model="editSessionName" placeholder="请输入会话名称" />
      </a-form-item>
      <a-form-item label="会话类型">
        <a-radio-group v-model="editSessionType">
          <a-radio value="personal">个人</a-radio>
          <a-radio value="group">群组</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否置顶">
        <a-switch v-model="editSessionSticky" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed, ref } from 'vue';
import { IconUser, IconUserGroup, IconPlus, IconStar } from '@arco-design/web-vue/es/icon';

const props = defineProps({
  sessions: Array,
  messages: Object,
  activeSession: [Number, String]
});

const sortedSessions = computed(() => {
  return [...props.sessions].sort((a, b) => {
    if (a.sticky !== b.sticky) return b.sticky - a.sticky;
    if (a.unread !== b.unread) return b.unread - a.unread;
    return new Date(b.lastTime) - new Date(a.lastTime);
  });
});

const isCreateSessionModalVisible = ref(false);
const newSessionName = ref('');
const newSessionType = ref('personal');
const newSessionSticky = ref(false);

const isEditSessionModalVisible = ref(false);
const editSessionId = ref(null);
const editSessionName = ref('');
const editSessionType = ref('personal');
const editSessionSticky = ref(false);

const openCreateSessionModal = () => {
  isCreateSessionModalVisible.value = true;
};

const createSession = () => {
  const newSession = {
    id: Date.now(), // 使用时间戳作为唯一ID
    name: newSessionName.value,
    type: newSessionType.value,
    sticky: newSessionSticky.value,
    unread: 0,
    lastTime: new Date().toISOString(),
  };
  props.sessions.push(newSession);
  saveSessions();
  isCreateSessionModalVisible.value = false;
  newSessionName.value = '';
  newSessionType.value = 'personal';
  newSessionSticky.value = false;
};

const openEditSessionModal = (session) => {
  editSessionId.value = session.id;
  editSessionName.value = session.name;
  editSessionType.value = session.type;
  editSessionSticky.value = session.sticky;
  isEditSessionModalVisible.value = true;
};

const saveEditSession = () => {
  const session = props.sessions.find((s) => s.id === editSessionId.value);
  if (session) {
    session.name = editSessionName.value;
    session.type = editSessionType.value;
    session.sticky = editSessionSticky.value;
    saveSessions();
  }
  isEditSessionModalVisible.value = false;
};

const deleteSession = (id) => {
  props.sessions = props.sessions.filter((s) => s.id !== id);
  saveSessions();
};

const saveSessions = () => {
  localStorage.setItem('sessions', JSON.stringify(props.sessions));
};

const loadSessions = () => {
  const savedSessions = localStorage.getItem('sessions');
  return savedSessions ? JSON.parse(savedSessions) : [];
};

// 初始化加载会话数据
if (!props.sessions.length) {
  props.sessions = loadSessions();
}
</script>

<style scoped>
.sticky-session {
  background-color: #f5f5f5 !important;
}

.session-time {
  color: #999;
  font-size: 0.8em;
  margin-left: 8px;
}

.list-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
}

.session-info {
  min-width: 0; /* 防止内容溢出 */
}

@media (max-width: 768px) {
  .session-list {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }
  
  .toggle-btn {
    width: 40px;
    height: 40px;
    min-width: auto;
    padding: 0;
  }
}
</style>